<template>
	<div class="page">
		<div class="role-main">
			<div class="role-header">
				<el-collapse style="width: 100%;">
					<el-collapse-item title="高级查询">
						<el-form :inline="true" :model="formInline" class="demo-form-inline" style="padding-left: 10px">
							<el-form-item label="角色名称">
								<el-input v-model="formInline.roleName" placeholder="角色名称" size="small"></el-input>
							</el-form-item>
							<el-form-item label="权限名称">
								<el-input v-model="formInline.perName" placeholder="权限名称" size="small"></el-input>
							</el-form-item>
							<el-form-item label="日期">
								<el-date-picker v-model="formInline.searchDate" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions2" size="small">
								</el-date-picker>
							</el-form-item>
							<el-form-item style="float: right">
								<el-button class="el-main-color" @click="searchRole" size="small">查 询</el-button>
							</el-form-item>
						</el-form>
					</el-collapse-item>
				</el-collapse>
			</div>
			<div class="role-header">
				<el-button class="el-main-color" @click="addShowDialog()" size="small">新增角色</el-button>
			</div>

			<el-table :data="tableData" border style="width: 100%">
				<el-table-column prop="roleName" label="角色名称" width="180">
				</el-table-column>
				<el-table-column prop="permissionName" label="角色权限" width="180">
				</el-table-column>
				<el-table-column prop="createBy" label="创建者" width="100">
				</el-table-column>
				<el-table-column prop="createDate" :formatter="format" label="创建日期" width="180">
				</el-table-column>
				<el-table-column prop="updateBy" label="更新者" width="100">
				</el-table-column>
				<el-table-column prop="updateDate" :formatter="formatUpdate" label="更新日期" width="180">
				</el-table-column>
				<el-table-column prop="remarks" label="备注" width="180">
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button @click="editRoleEvent(scope.row)" type="text" size="mini">编辑</el-button>
						<el-button @click="deleteRole(scope.row)" type="text" size="mini">删除</el-button>
					</template>
				</el-table-column>
			</el-table>

			<el-dialog title="新增角色" :visible.sync="dialogRoleVisible" :before-close="beforClose">
				<el-form class="demo-ruleForm" :model="role" ref="role" label-width="80px" style="text-align: left" status-icon :rules="rules1">
					<el-form-item label="角色名称" prop="roleName">
						<el-input v-model="role.roleName"></el-input>
					</el-form-item>
					<el-form-item label="权限配置" prop="selectValue">
						<el-select v-model="role.permissionId" placeholder="请配置权限" @visible-change="visibleChange">
							<el-option v-for="item in permission" :key="item.id" :label="item.permissionName" :value="item.id">
							</el-option>
						</el-select>

					</el-form-item>
					<el-form-item label="添加备注" prop="remark">
						<el-input type="textarea" rows="4" placeholder="用户备注信息" v-model="role.remarks"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button type="primary" @click="submitForm('role')" size="small" :loading="newSaveButtonStatus">提 交</el-button>
					<el-button @click="resetForm('role')" size="small">重 置</el-button>
				</div>
			</el-dialog>
			<el-dialog title="修改角色" :visible.sync="dialogEditRoleVisible">
				<el-form class="demo-ruleForm" :model="editRole" ref="editRole" label-width="80px" style="text-align: left" status-icon :rules="rules1">
					<el-form-item label="角色名称" prop="roleName">
						<el-input v-model="editRole.roleName"></el-input>
					</el-form-item>
					<el-form-item label="权限配置" prop="permissionId">
						<el-select v-model="editRole.permissionId" placeholder="请选择" @visible-change="visibleChange">
							<el-option v-for="item in permission" :key="item.id" :label="item.permissionName" :value="item.id">
							</el-option>
						</el-select>

					</el-form-item>
					<el-form-item label="添加备注" prop="remarks">
						<el-input type="textarea" rows="4" placeholder="用户备注信息" v-model="editRole.remarks"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button type="primary" @click="submitEditForm('role')" size="small" :loading="newSaveButtonStatus">提 交</el-button>
					<el-button @click="resetForm('editRole')" size="small">重 置</el-button>
				</div>
			</el-dialog>
		</div>
	</div>

</template>
<style>
	@import url("../../common/common.css");
	@import url("role.css");
</style>
<script>
	import $ from 'jquery'
	export default {
		data() {

			return {
				dialogEditRoleVisible: false,
				dialogRoleVisible: false,
				newSaveButtonStatus: false,
				permission: [],
				role: {
					id: '',
					roleId: '',
					permissionId: '',
					roleName: '',
					remarks: ''
				},
				editRole: {
					id: '',
					roleId: '',
					permissionId: '',
					roleName: '',
					remarks: ''
				},

				tableData: [],
				rules1: {
					roleName: [{
						required: true,
						validator: "",
						trigger: ['blur', 'change']
					}]
				},
				/*****搜索表单******/
				formInline: {
					roleName: '',
					perName: '',
					searchDate: []
				},

				/*******日历控件******/
				pickerOptions2: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}]
				}
			}
		},
		created() {
			this.getList();
			this.visibleChange(true);
		},
		mounted() {},
		methods: {
			/**
			 * 弹出框消失回调
			 */
			beforClose(done) {

				this.resetForm("role");
				done();
			},
			/**
			 * 下拉选择框回调函数
			 * @param status true 显示，false 隐藏
			 */
			visibleChange(status) {
				var _self = this;
				if(status && _self.permission.length == 0) {
					_self.utils.ajaxJSON({
						type: 'POST',
						url: 'permission/list?pageNo=' + 1 + '&pageSize=' + 10,
						data: {},
						success: function(res) {

							if(res.status == 200) {
								console.log(res.dataList);
								_self.permission = res.dataList;
							}

						}
					})
				}

			},
			/**
			 * 显示添加角色弹框
			 */
			addShowDialog: function() {
				this.dialogRoleVisible = true;

			},
			/**
			 * 查询角色
			 */
			searchRole: function() {
        var _self = this,startTime="",endTime="";
        if(_self.formInline.searchDate.length >0){

          startTime = _self.formInline.searchDate[0].getTime();

          endTime = _self.formInline.searchDate[1].getTime();
        }
			  _self.utils.ajaxJSON({
          type:'POST',
          url:'role/search',
          data:{
            roleName:_self.formInline.roleName,
            perName:_self.formInline.perName,
            startTime:startTime,
            endTime:endTime
          },
          success:function(res){
              if(res.status == 200){
                _self.tableData = res.dataList;
              }
          }
        })
			},
			/**
			 *  增加角色提交
			 */
			submitForm: function(formName) {
				var _self = this;
				_self.utils.ajaxJSON({
					type: 'POST',
					url: 'role/add',
					data: _self.role,
					success: function(res) {
						if(res.status == 200) {
							_self.dialogRoleVisible = false;
							_self.getList();
						}
					}
				})

			},
			/**
			 * 修改提交
			 */
			submitEditForm: function(formName) {
				var _self = this;
				_self.utils.ajaxJSON({
					type: 'POST',
					url: 'role/add',
					data: _self.editRole,
					success: function(res) {
						if(res.status == 200) {
							_self.dialogEditRoleVisible = false;
							_self.getList();
						}
					}
				})

			},
			/**
			 * 重置表单
			 */
			resetForm: function(formName) {
				this.$refs[formName].resetFields();
			},

			/**
			 * 修改角色
			 */
			editRoleEvent: function(scope) {
				this.editRole = scope;
				this.dialogEditRoleVisible = true;

			},
			/**
			 * 删除角色
			 */
			deleteRole: function(scope) {
				var _self = this;
				_self.utils.ajaxJSON({
					type: 'POST',
					url: 'role/delete',
					data: scope,
					success: function(res) {
						if(res.status == 200) {
							_self.$message({
								type: 'success',
								message: "删除成功"
							});
							_self.getList();
						}
					}
				})

			},
			/**
			 * 请求权限列表数据
			 */
			getList: function() {
				var _self = this;
				_self.utils.ajaxJSON({
					type: 'POST',
					url: 'role/all?pageNo=' + 1 + '&pageSize=' + 10,
					data: {},
					success: function(res) {
						if(res.status == 200) {
							console.log(res.dataList);
							_self.tableData = res.dataList;
						}
					}
				})
			},
			format(row, column, cellValue, index) {
				return new Date(row.createDate).Format('yyyy-MM-dd hh:mm:ss');
			},
			formatUpdate(row, column, cellValue, index) {
				if(!row.updateDate){
					return '';
				}
				return new Date(row.updateDate).Format('yyyy-MM-dd hh:mm:ss');
			}
		}
	}
</script>
